import AMapLoader from '@amap/amap-jsapi-loader';
import { useEffect } from "react";
import styles from "./MapContainer.css";
export default function MapContainer() {
  let map = null;
  let keyword = null
  useEffect(() => {
    AMapLoader.reset()
    AMapLoader.load({
      key: "b4fc38e31d627c48836c9bded21d79e0", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923] // 初始化地图中心点位置
        })

        AMap.plugin([
          'AMap.ToolBar',
          'AMap.Scale',
          'AMap.HawkEye',
          'AMap.MapType',
          'AMap.Geolocation',
      ], function(){
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar());
      
          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());
      
          // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          map.addControl(new AMap.HawkEye({isOpen:true}));
         
          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(new AMap.MapType());
         
          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          map.addControl(new AMap.Geolocation());
      })

      AMap.plugin('AMap.AutoComplete', function(){
        // 实例化AutoComplete
        var autoOptions = {
          // input 为绑定输入提示功能的input的DOM ID
          input: 'input_id'
        }
        var autoComplete= new AMap.AutoComplete(autoOptions);
        // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
      })

    //   AMap.ready(function() {  
    //     var placeSearch = new AMap.PlaceSearch({  
    //         // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode  
    //         city: '010'  
    //     });  
          
    //     placeSearch.search('北京大学', function (status, result) {  
    //         // 查询成功时，result即对应匹配的POI信息  
    //     });  
    // });
    
      })
      .catch((e) => {
        // console.log(e);
      });

    return () => {
      map?.destroy();
    };
  }, []);

  return (
    <div
      id="container"
      className={styles.container}
      style={{ height: "500px" }}
    ></div>
  );
}
